<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favicon.ico">
    <title>在线教育网</title>

    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/normalize-css/normalize.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/css/page-learing-list.css" />
    
</head>

<body>

<!-- 页面头部 -->
<!--#include virtual="/include/header.html"-->
<div id="searcharea">
    <div class="learing-list">
        <div class="list-box">
            <ul>
                <li>一级分类：</li>
                <li class="all">全部</li>
                <ol>
                    <li>数据分析</li>
                    <li>机器学习工程</li>
                    <li>前端开发工程</li>
                    <li>人工智能工程</li>
                    <li>全栈工程</li>
                    <li>iOS工程</li>
                    <li>VR开发</li>
                    <li>深度学习</li>
                    <li>商业预测</li>
                </ol>
            </ul>
            <ul>
                <li>二级分类：</li>
                <li class="all">全部</li>
                <ol>
                    <li>体系课程</li>
                    <li>大数据</li>
                    <li>云计算</li>
                </ol><a href="#" class="more">更多 ∨</a></ul>
            <ul>
                <li>难度等级：</li>
                <li class="all">全部</li>
                <ol>
                    <li>初级</li>
                    <li>中级</li>
                    <li>高级</li>
                </ol>
            </ul>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-9 list-row-left">
                <div class="list-cont-left">
                    <div class="tit">
                        <ul class="nav nav-tabs ">
                            <li class="active"><a href="#">推荐</a></li>
                            <li><a href="#">最新</a></li>
                            <li><a href="#">热评</a></li>
                            <div class="page navbar-right">
                                <a href="#" class="prev">
                                    < </a>
                                        <span class="">1/28</span>
                                        <a href="#" class="next"> ></a>
                            </div>
                        </ul>
                    </div>
                    <div class="tab-content">
                        <div class="content-list">

                            <div class="recom-item" v-for="course in courseList" >
                                <a href="#">
                                    <p><img src="../img/widget-demo1.png" width="100%" alt=""><span class="lab">HOT</span></p>
                                    <ul>
                                        <li>{{course.name}} </li>
                                        <li><span>{{course.grade}}</span> <em> · </em> 1125人在学习</li>
                                    </ul>
                                </a>
                            </div>
                            <div class="recom-item">
                                <a href="#">
                                    <p><img src="../img/widget-demo2.png" width="100%" alt=""><span class="lab">HOT</span></p>
                                    <ul>
                                        <li>Think PHP 5.0 博客系统实战项目演练 </li>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </ul>
                                </a>
                            </div>
                            <div class="recom-item">
                                <a href="#">
                                    <p><img src="../img/widget-demo3.png" width="100%" alt=""><span class="lab">HOT</span></p>
                                    <ul>
                                        <li>Think PHP 5.0 博客系统实战项目演练 </li>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </ul>
                                </a>
                            </div>
                            <div class="recom-item">
                                <a href="#">
                                    <p><img src="../img/widget-demo4.png" width="100%" alt=""><span class="lab">HOT</span></p>
                                    <ul>
                                        <li>Think PHP 5.0 博客系统实战项目演练 </li>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </ul>
                                </a>
                            </div>
                            <div class="recom-item">
                                <a href="#">
                                    <p><img src="../img/widget-demo2.png" width="100%" alt=""></p>
                                    <ul>
                                        <li>Think PHP 5.0 博客系统实战项目演练 </li>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </ul>
                                </a>
                            </div>
                            <div class="recom-item">
                                <a href="#">
                                    <p><img src="../img/widget-demo3.png" width="100%" alt=""></p>
                                    <ul>
                                        <li>Think PHP 5.0 博客系统实战项目演练 </li>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </ul>
                                </a>
                            </div>
                            <div class="recom-item">
                                <a href="#">
                                    <p><img src="../img/widget-demo4.png" width="100%" alt=""></p>
                                    <ul>
                                        <li>Think PHP 5.0 博客系统实战项目演练 </li>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </ul>
                                </a>
                            </div>
                            <div class="recom-item">
                                <a href="#">
                                    <p><img src="../img/widget-demo1.png" width="100%" alt=""></p>
                                    <ul>
                                        <li>Think PHP 5.0 博客系统实战项目演练 </li>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </ul>
                                </a>
                            </div>
                            <div class="recom-item">
                                <a href="#">
                                    <p><img src="../img/widget-demo1.png" width="100%" alt=""></p>
                                    <ul>
                                        <li>Think PHP 5.0 博客系统实战项目演练 </li>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </ul>
                                </a>
                            </div>
                           
                            <div class="recom-item">
                                <a href="#">
                                    <p><img src="../img/widget-demo3.png" width="100%" alt=""></p>
                                    <ul>
                                        <li>Think PHP 5.0 博客系统实战项目演练 </li>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </ul>
                                </a>
                            </div>
                            <div class="recom-item">
                                <a href="#">
                                    <p><img src="../img/widget-demo4.png" width="100%" alt=""></p>
                                    <ul>
                                        <li>Think PHP 5.0 博客系统实战项目演练 </li>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </ul>
                                </a>
                            </div>
                            <li class="clearfix">
                                <el-pagination
                                background
                                layout="prev, pager, next"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :total="1000">
                            </el-pagination>
                            </li>
                        </div>
                        <div class="clearfix">
                           


                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 list-row-rit">
                <div class="list-cont-right">
                    <div class="right-box">
                        <div class="tit">精品TOP榜</div>
                        <div class="contList">
                            <div class="contList-item">
                                <div class="box hov">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="../img/widget-topBg.png" width="100%" height="110" alt=""></div>
                                        <div class="desc">通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……</div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>

                        <div class="tit">猜你喜欢</div>
                        <div class="contList">
                            <div class="contList-item">
                                <div class="box hov">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="../img/widget-btnbg.png" width="100%" height="110" alt=""></div>
                                        <div class="desc">通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……</div>
                                    </div>
                                </div>
                            </div>
                           
                            <div class="contList-item">
                                <div class="box">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="../img/widget-btnbg.png" width="100%" height="110" alt=""></div>
                                        <div class="desc">通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<!--底部版权-->
<!--#include virtual="/include/footer.html"-->

    <!-- 页面 css js -->

    <script type="text/javascript" src="http://www.51xuecheng.cn/static/plugins/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="http://www.51xuecheng.cn/static/plugins/bootstrap/dist/js/bootstrap.js"></script>
    <script>
        $('.list-box ol li').on('click', function() {
            $(this).addClass('active');
            $(this).siblings().removeClass('active');
        })


        $('.list-cont-left .nav-tabs li').on('click', function() {
            $(this).addClass("active").siblings().removeClass('active');
        })


        $('.contList-item').hover(function() {
            $(this).find('.box').addClass('hov').parent().siblings().find('.box').removeClass('hov')
        }, function() {
            $(this).siblings().first().find('.box').addClass('hov').parent().siblings().find('.box').removeClass('hov')
        })
    </script>
    <script>
/*查询课程列表*/
const requestCourseList = () => {
    return  requestPost('/api/content/course/list?pageNo=2&pageSize=1',{});
}
        var searchVm= new Vue({  
              el: "#searcharea", 
      
              data: {
                  courseInfo:{
                      name:'',
                      grade:''
                  },
                  courseList:[],
                  currentPage: 1
              },
              methods: {

                
                  submitSearch() {
                    //  var course_1 = new Object();
                    //  course_1.name="java基础";
                    //  course_1.grade="基础";
                    //  var course_2 = new Object();
                    //  course_2.name="java项目实战";
                    //  course_2.grade="高级";
                    //  this.courseList=[course_1,course_2];
                    
                    requestCourseList().then(res=>{
                        console.log(res);
                        this.courseList = res.items;
                        console.log(this.courseList);
                    })

                  },
                  
                  handleCurrentChange(val){
                    alert(val)
                  }
              },
             created() {
                this.submitSearch()
                
              },
              mounted(){
                 
              }
          })

      </script>
</body>